<template>
  <div class="lc-container">
    <a-carousel
      :auto-play="true"
      class="lc-carousel"
      indicator-type="dot"
      show-arrow="hover"
    >
      <a-carousel-item :key="image" v-for="image in images">
        <img :src="image" />
      </a-carousel-item>
    </a-carousel>
    <div class="lc-content"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
const images = [
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
  "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
];
</script>

<style lang="scss" scoped>
.lc-container {
  .lc-carousel {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    img {
      height: 100%;
      width: 100%;
      object-fit: fill;
    }
  }

  .lc-content {
    margin: 0 20px;
  }
}
</style>
